﻿@{
    ViewData["Title"] = "列表2";
}

<div>
    <el-container v-loading="loading">
        <el-main>
            <el-row type="flex" align="middle">
                <el-col :span="24">
                    <el-form :inline="true" :model="tableQuery.filter">

                        <el-form-item prop="code" label="数据源编码">
                            <el-input v-model="tableQuery.filter.code" placeholder="数据源编码" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item prop="name" label="数据源名称">
                            <el-input v-model="tableQuery.filter.name" placeholder="数据源名称" size="mini"></el-input>
                        </el-form-item>
                        <el-form-item prop="dbType" label="数据库类型">
                            <el-select v-model="tableQuery.filter.dbType" clearable placeholder="请选择" size="mini">
                                <el-option key="1" label="SqlServer" value="1"></el-option>
                                <el-option key="4" label="PostgreSQL" value="4"></el-option>
                                <el-option key="0" label="MySql" value="0"></el-option>
                                @* <el-option key="5" label="Dm" value="5"></el-option> *@
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="status" label="启用/禁用">
                            <el-select v-model="tableQuery.filter.status" clearable placeholder="请选择" size="mini">
                                <el-option key="0" label="启用" value="0"></el-option>
                                <el-option key="1" label="禁用" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="status">
                            <el-button type="primary" size="mini" v-on:click="Load">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>

            <el-row type="flex" align="middle">
                <el-col :span="18">&nbsp;</el-col>
                <el-col :span="5" style="text-align: right;">

                    <el-button type="primary" size="mini" icon="el-icon-plus" @@click="addDialogForm">新建</el-button>
                    <el-button type="default" size="mini" icon="el-icon-refresh" v-on:click="Load">刷新</el-button>
                </el-col>
            </el-row>

            <el-row type="flex" align="middle">
                <el-col :span="24" style="padding: 10px 0 0 0;">

                    <el-table ref="tb" :data="tableData" size="mini" border stripe row-key="id" style="width: 100%">
                        <el-table-column type="expand" prop="index">
                            <template slot-scope="props">
                                <div style="padding:5px 15px;">
                                    <el-descriptions>
                                        <el-descriptions-item label="链接字符串">{{ props.row.connectionString }}</el-descriptions-item>
                                    </el-descriptions>
                                </div>
                                <div style="padding:0px 15px;">
                                    <el-descriptions>
                                        <el-descriptions-item label="备注">{{ props.row.remark }}</el-descriptions-item>
                                    </el-descriptions>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="code" label="数据源编码" width="140"> </el-table-column>
                        <el-table-column prop="name" label="数据源名称" width="240"> </el-table-column>
                        <el-table-column prop="dbType" label="数据库类型" width="90">
                            <template slot-scope="scope">
                                <el-tag size="middle" v-if="scope.row.dbType==0">MySql</el-tag>
                                <el-tag size="middle" v-else-if="scope.row.dbType==1">SqlServer</el-tag>
                                <el-tag size="middle" v-else-if="scope.row.dbType==4">PostgreSQL</el-tag>
                                @* <el-tag size="middle" v-else-if="scope.row.dbType==5">Dm</el-tag> *@
                                <el-tag size="middle" v-else>SqlServer</el-tag>
                            </template>
                        </el-table-column>
                        @* <el-table-column prop="connectionString" label="链接字符串" fit> </el-table-column> *@

                        <el-table-column prop="status" label="启用状态" width="80">
                            <template slot-scope="scope">
                                <el-tag size="middle" v-if="scope.row.status==0">启用</el-tag>
                                <el-tag size="middle" type="danger" v-else>禁用</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="180"> </el-table-column>
                        <el-table-column prop="remark" label="备注"> </el-table-column>

                        <el-table-column label="操作" style="width:160px;">
                            <template slot-scope="scope">
                                <div v-if="scope.row.status==1">
                                    <el-tooltip content="启用" placement="bottom">
                                        <el-button type="primary" size="mini" icon="el-icon-video-play" v-on:click="handleStart(scope.row.id,0)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="编辑" placement="bottom">
                                        <el-button type="info" size="mini" icon="el-icon-edit" v-on:click="editDialogForm(scope.$index, scope.row)"></el-button>
                                    </el-tooltip>
                                    <el-tooltip content="删除" placement="bottom">
                                        <el-button type="danger" size="mini" icon="el-icon-delete-solid" v-on:click="handleDelete(scope.$index, scope.row)"></el-button>
                                    </el-tooltip>
                                </div>
                                <div v-else>
                                    <el-tooltip content="禁用" placement="bottom">
                                        <el-button type="warning" size="mini" icon="el-icon-video-play" v-on:click="handleStart(scope.row.id,1)"></el-button>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                    <el-pagination @@size-change="handleSizeChange"
                                   @@current-change="handleCurrentChange"
                                   :current-page="tableQuery.pageNo"
                                   :page-sizes="[10, 20, 30, 40, 50]"
                                   :page-size="tableQuery.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="tableQuery.totalRows">
                    </el-pagination>

                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
<el-openfrom dialogtitle="信息2" ref="iframe"
             v-bind:dialogvisible="dialogVisible"
             url="/demo2/detail"
             v-on:submit="submitForm"
             v-on:close="onClose"></el-openfrom>

@section Scripts {
    <script>
        
    </script>
    <script>
        var myvue = new Vue({
            el: "#app",
            data() {
                return {
                    dialogVisible: false,
                    activeIndex: '3',
                    loading: false,
                    tableQuery: {
                        pageNo: 1,
                        pageSize: 10,
                        totalRows: 0,
                        filter: {
                            code: "",
                            name: "",
                            dbType: "",
                            status: "",
                        }
                    },
                    tableData: [],

                    showSubmit: true,
                    showCancel: true
                }
            },
            created() {
                // this.Load();
            },
            mounted() {
                // // 监听message事件
                // window.addEventListener('message', this.handleMessage);
            },
            methods: {
                // handleMessage(event) {
                //     // console.log(event)
                //     // console.log(event.source !== window.parent)
                //     // 确保消息来自预期的源
                //     // 如果需要更严格的安全性，请验证event.origin
                //     // if (event.source !== window.parent) {
                //     //     return;
                //     // }
                //     // console.log(event.data.dialogVisible)
                //     this.dialogVisible = event.data.dialogVisible;
                // },
                Load() {
                    var that = this;
                    that.loading = true;
                    axios.post("/dbmanage/getpagedata", that.tableQuery).then(function (res) {
                        that.tableData = res.data.data.rows;
                        that.tableQuery.totalRows = res.data.data.totalRows;
                        that.loading = false;
                    }).catch(function () { that.loading = false; });;
                },
                handleSizeChange(val) { var that = this; that.tableQuery.pageNo = 1; that.tableQuery.pageSize = val; that.Load(); },
                handleCurrentChange(val) { var that = this; that.tableQuery.pageNo = val; that.Load(); },


                addDialogForm() {
                    var that = this;
                    that.dialogVisible = true;
                    that.dialogForm = null;
                    that.dialogForm = that.dialogInitForm;
                },
                editDialogForm(index, row) {
                    var that = this;
                    that.dialogVisible = true;
                    that.dialogForm = that.dialogInitForm;
                    axios("/dbmanage/getdatabyid/" + row.id).then(function (res) { if (res.data.code == 200) { that.dialogForm = res.data.data; } });
                },
                TestConnstr() {
                    var that = this;
                    that.formLoading = true;
                    that.$refs["dialogForm"].validate((valid) => {
                        if (valid) {
                            axios.post("/dbmanage/TestConnstr", that.dialogForm).then(function (res) {
                                if (res.data.code == 200) {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'success', callback: () => { } });
                                } else {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'error', callback: () => { } });
                                }
                                that.formLoading = false;
                            });
                        }
                    });
                },
                onClose() {
                    this.dialogVisible = false;
                },

                openWin(func, parameter) {
                    const iframe = this.$refs.iframe.$refs.iframe.contentWindow;
                    iframe[func](parameter)
                },
                submitForm() {
                    var that = this;
                    that.openWin('submitForm', 1222)
                    // iframe.submitForm(123456);

                    // console.log(iframe.contentWindow)


                    // this.dialogVisible = false;
                    // that.dialogref.contentWindow.$methods.submitForm()
                    // that.$refs["el-open"].submit();
                    // that.formLoading = true;
                    // that.$refs["dialogForm"].validate((valid) => {
                    //     if (valid) {
                    //         axios.post("/dbmanage/savedata", that.dialogForm).then(function (res) {
                    //             if (res.data.code == 200) {
                    //                 ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'success', callback: () => { that.dialogFormVisible = false; that.dialogForm = that.dialogInitForm; that.Load(); } });
                    //             } else {
                    //                 ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'error', callback: () => { } });
                    //             }
                    //             that.formLoading = false;
                    //         });
                    //     }
                    // });
                },
                handleStart(id, start) {
                    var that = this;
                    var title = "确定启用此数据源?";
                    if (start == 1) {
                        title = "确定禁用此数据源?";
                    }
                    else {
                        title = "确定启用此数据源?";
                    }
                    this.$confirm(title, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                        axios("/dbmanage/Start/" + id).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message({ message: res.data.message, center: true, type: 'success' });
                                that.Load();
                            } else {
                                that.$message({ message: res.data.message, center: true, type: 'error' });
                            }
                        });
                    });
                },
                handleDelete(index, row) {
                    var that = this;
                    this.$confirm('确定删除此任务?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                        axios("/dbmanage/delete/" + row.id).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message({ message: res.data.message, center: true, type: 'success' });
                                // rows.splice(index, 1);
                                that.Load();
                            } else {
                                that.$message({ message: res.data.message, center: true, type: 'error' });
                            }
                        });
                    });
                }

            }
        });

    </script>

}